<template>
  <div class="choose-comm">
    <div class="table-data">
      <el-collapse-transition>
        <section v-show="searchshow" class="main-search merge">
          <span class="svg-container">
            <svg-icon icon-class="search" />
          </span>
          <el-input
            v-model.trim="listQuery.name"
            placeholder="输入组件名称搜索"
            class="search-input"
            @keyup.enter.native="handleFilter"
          />
          <section class="search-btn">
            <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <span class="search-more" @click="searchshow = !searchshow">
              更多筛选条件
              <i class="el-icon-arrow-down" />
            </span>
          </section>
        </section>
      </el-collapse-transition>
      <el-collapse-transition>
        <section v-show="!searchshow" class="main-search separate">
          <section class="search-inner">
            <el-row>
              <el-col :span="12">
                <section class="search-inner-item">
                  <div class="item-label">组件名称</div>
                  <el-input
                    v-model.trim="search.name"
                    style="width: 90%;"
                    class="filter-item"
                    placeholder="请输入组件名称搜索"
                  />
                </section>
              </el-col>
              <el-col :span="12">
                <section class="search-inner-item">
                  <div class="item-label">组件标识</div>
                  <el-input
                    v-model.trim="search.code"
                    style="width: 90%;"
                    class="filter-item"
                    placeholder="请输入组件标识搜索"
                  />
                </section>
              </el-col>
              <el-col :span="12">
                <section class="search-inner-item">
                  <div class="item-label">组件分类</div>
                  <el-select v-model="search.classifyId" style="width: 90%;" placeholder="请选择">
                    <el-option
                      v-for="item in myClass"
                      :key="item.id"
                      :label="item.classifyName"
                      :value="item.id"
                    />
                  </el-select>
                </section>
              </el-col>
            </el-row>
          </section>
          <section class="search-btn">
            <el-button type="primary" @click="handleFilter">搜索</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <span class="search-more" @click="searchshow = !searchshow">
              精简筛选条件
              <i class="el-icon-arrow-up" />
            </span>
          </section>
        </section>
      </el-collapse-transition>
      <!--组件数据-->
      <el-table
        :data="list"
        style="width:680px;"
        class="my-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="classifyIdValue"
          label="分类"
          width="180"
        />
        <el-table-column
          prop="componentName"
          label="组件名称"
          width="180"
        />
        <el-table-column
          width="180"
          prop="code"
          label="组件标识"
        />
      </el-table>
    </div>
    <div class="page">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { queryComponents, queryCommClass } from '@/views/pagemanage/api/register'

export default {
  name: 'ChooseComm',
  components: { Pagination },
  props: {},
  data() {
    return {
      searchshow: true,
      search: {
        name: '',
        classifyId: '',
        code: ''
      },
      listLoading: false,
      total: 0,
      list: [],
      listQuery: {
        page: 1,
        limit: 10,
        name: ''
      },
      multipleSelection: [],
      options: [{
        value: '轮播组件',
        label: '轮播组件'
      }, {
        value: '基础组件',
        label: '基础组件'
      }],
      myClass: []// 所有分类
    }
  },
  created() {
    this.getClass()
    this.getList()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('select', val)
    },
    handleSelect(info) {
      this.$emit('select', info)
    },
    handleReset() {
      this.search.name = ''
      this.search.code = ''
      this.search.classifyId = ''
      this.listQuery.page = 1
      this.listQuery.name = ''
      this.getList()
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 获取所有组件分类
    getClass() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        queryCommClass({ classifyType: 'FLLX_CUSTOMCCOMPONENTS' }).then(res => {
          this.myClass = res.data.data || []
          loading.close()
        }).catch(err => {
          console.warn(err)
          loading.close()
        })
      })
    },
    // 获取所有组件
    getList() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })

      var query = {}
      if (this.searchshow) {
        query['componentName'] = this.listQuery.name
      } else {
        query['componentName'] = this.search.name
        query['classifyId'] = this.search.classifyId
        query['code'] = this.search.code
      }
      return new Promise((resolve, reject) => {
        queryComponents(query).then(res => {
          this.list = res.data.data || []
          loading.close()
        }).catch(err => {
          console.warn(err)
          loading.close()
        })
      })
    }
  }
}
</script>

<style type="text/css" lang="scss">
.choose-comm {
  height: 550px;
  display: flex;
  flex-direction: column;

  .main-search {
    background-color: #fff;
    padding: 0 10px;

    .svg-container {
      padding: 0 5px 0 10px;
      color: #bfced6;
      vertical-align: middle;
      display: inline-block;
    }

    .search-input {
      width: 50%;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        left: -25px;
        right: 0;
        bottom: 8px;
        height: 1px;
        background: rgba(226, 227, 232, 1);
      }

      input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
        padding: 0;

        &:focus {
          outline: none;
          background-color: transparent;
        }
      }
    }

    .search-btn {
      display: inline-block;
      float: right;

      .el-button.is-round {
        padding: 10px 30px;
        margin-right: 34px;
      }

      .search-more {
        font-size: 14px;
        font-weight: 500;
        @include font-color($mainColor);
        cursor: pointer;
        margin-left: 10px;
      }
    }

    &.merge {
      height: 50px;
      line-height: 50px;
    }

    &.separate {
      .search-inner {
        padding-top: 10px;

        .search-inner-item {
          .item-label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #a6a6a6;
            font-weight: 400;
          }

          .el-input {
            position: relative;

            &.el-date-editor input {
              padding-left: 30px;
            }

            .el-input__inner {
              border: none;
              padding: 0;
            }

            &:after {
              content: '';
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }

      .search-btn {
        text-align: center;
        display: block;
        float: none;
        height: 56px;
        line-height: 56px;
      }
    }
  }

  .table-data {
    flex: 1;
    display: flex;
    overflow-y: hidden;
    flex-direction: column;

    .my-table {
      margin-top: 20px;
      flex: 1;
      overflow-y: auto;
    }
  }

  .page {
    height: 50px;
  }
}
</style>
